<template>
  <div class="login-box">
    <div class="bg-img"></div>
    <div class="back"></div>
    <img src="../../images/logo.png" width="80" style="margin: 0 auto; padding-top: 100px; position: relative" />
    <div class="form">
      <div class="line">
        <span class="iconfont icon-shouji"></span>
        <input type="number" v-model="phone" placeholder="请输入手机号码" />
      </div>
      <div class="line">
        <span class="iconfont icon-anquanbaozhang"></span>
        <input type="text" v-model="code" placeholder="请输入验证码" />
        <button @click="codeEvt">{{ codeMsg }}</button>
      </div>
      <van-button 
      type="primary" 
      size="normal" 
      @click="loginEvt"
      >登录</van-button>
      <van-checkbox v-model="checked">免登录</van-checkbox>
      <p @click="router.push('/register')">没有账号？去注册</p>
    </div>
    <p class="agreement">
      <van-icon name="passed" />
      登录即表示您已阅读并同意
      <span @click="show = true"> 《潮服购用户许可服务协议》 </span>
    </p>
    <div class="copy">@copy-rigth,chaofu,2023-10-21</div>
    <div class="arrcod" v-show="show">
      <div class="bj"></div>
      <div class="content">
        <van-icon name="cross" @click="show = false" />
        <p>潮服购用户协议须知</p>
        <div class="content-l" v-html="data"></div>
        <van-button type="primary" size="normal" @click="show = false">我知道了</van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Ref, ref } from "vue";
import { Router, useRouter } from "vue-router";
import { showToast } from 'vant'
import { userCodeApi, userLoginApi } from "../../apis/userApi";
import { useCommonStore } from "../../store";
import { AUTO_CACHE_KEY } from "../../config/common.cfg";
import { encodeApi } from "../../utils";

let data =
  '\n        <blockquote> \n            <p>欢迎您签订《合作协议》（下称“本协议”）！本协议签约主体为您与SAC俱乐部平台经营者（陕西联杰宇宙娱乐有限公司】，下称“SAC俱乐部”），本协议对您与SAC俱乐部均具有法律<a href="https://so.csdn.net/so/search?q=%E7%BA%A6%E6%9D%9F&amp;spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=%E7%BA%A6%E6%9D%9F&amp;spm=1001.2101.3001.7020&quot;}" data-tit="约束" data-pretit="约束">约束</a>力。</p> \n            <p></p> \n            <p>一、合作事项</p> \n            <p></p> \n            <p>您自愿推广商户在SAC俱乐部平台上发布的特卖活动销售信息，商户同意您的推广行为并给予您一定的劳务报酬。SAC俱乐部给予您协助，协助行为包括但不限于代商家支付您劳务报酬、提供相关后台给您使用等。</p> \n            <p></p> \n            <p>二、合作宗旨</p> \n            <p></p> \n            <p>1、只有您在同意本协议内容后，您才能开展推广平台信息的相关活动，并获得劳务报酬；</p> \n            <p></p> \n            <p>2、SAC俱乐部作为监督平台，负责代商户对您的推广行为进行监督，您获取的劳务报酬实际由商户承担，SAC俱乐部代为支付。如您对劳务报酬有异议，SAC俱乐部将帮助您与商家进行积极沟通。</p> \n            <p></p> \n            <p>3、您应坚持诚实守信的原则，合法、合规、合理地开展推广活动。SAC俱乐部有权代表商户监督、检查您所使用的任何推广方式，对于不利于SAC俱乐部平台和商户的推广方式（具体以SAC俱乐部认定为准），SAC俱乐部有权要求您立即停止推广活动甚至取消您推广平台信息的资格（包括但不限于冻结、注销您的推广账户等），给SAC俱乐部或商户造成损失的，您同时还应承担损失赔偿责任以及律师费、诉讼费等SAC俱乐部或商户为保护权益、实现权益所产生的一切费用。</p> \n            <p></p> \n            <p>4、您应真实、准确、完整地向SAC俱乐部反馈您的推广信息。如您反馈虚假数据，经SAC俱乐部核实的，SAC俱乐部或商户有权不予支付劳务报酬，并向您追索您因反馈虚假数据所获取的劳务报酬。</p> \n            <p></p> \n            <p>三、劳务报酬与结算方式</p> \n            <p></p> \n            <p>1、劳务报酬的计算方式：由SAC俱乐部按照您的有效推广数量进行统计，具体订单的报酬由提供具体产品/服务的商户根据上线产品的情况综合评估确定；</p> \n            <p></p> \n            <p>2、劳务报酬的结算周期与结算方式为：消费者在SAC俱乐部平台上产生订单，SAC俱乐部将代商户在1个工作日内确定订单有效性并统计劳务报酬。劳务报酬将直接计入您在SAC俱乐部的账户中，当您个人账户满50元时，方可提现至本人微信钱包；</p> \n            <p></p> \n            <p>3、有效推广数量是指消费者在SAC俱乐部平台上购买订单并经商家核销后的有效订单数量。如因商家原因或客户自身原因导致退单的，该订单即视为失效订购单，SAC俱乐部将有权代商户扣回失效订单的的劳务报酬。</p> \n            <p></p> \n            <p>四、特别关注</p> \n            <p></p> \n            <p>1、在您获取SAC俱乐部的推广账户之前，请您特别注意如下事项：</p> \n            <p></p> \n            <p>1）请确认您是否具有中华人民共和国法律所规定的相应的民事行为能力，如您不具备相应的民事行为能力，则您及您的监护人将会承担由此导致的一切后果；</p> \n            <p></p> \n            <p>2）严格遵守SAC俱乐部所制定的推广管理机制，不得违背相关规则；</p> \n            <p></p> \n            <p>3）您应通过合法合规渠道获得SAC俱乐部的推广账户，不得使用SAC俱乐部所不知道且不认可的方式手段获得推广账户；</p> \n            <p></p> \n            <p>4）您应使用合法、合规、合理的方式推广平台信息，如您的推广行为触犯了中华人民共和国的法律、法规、规范性文件，则一切后果由您自行承担，您的一切违法行为皆与SAC俱乐部和商户无关；</p> \n            <p></p> \n            <p>5）您应保证提供给SAC俱乐部的注册资料真实无误，该资料对于您获取劳务报酬至关重要。如因您提供虚假资料或被他人获悉您自己的注册资料，从而导致的损失全部由您本人承担；</p> \n            <p></p> \n            <p>6）您对因履行本协议所接触、知悉的SAC俱乐部的所有信息均负有保密义务。您不得通过各种手段获取SAC俱乐部的内部隐私资料，更不得将SAC俱乐部的信息、资料透露给他人，否则SAC俱乐部有权追究您的法律责任；</p> \n            <p></p> \n            <p>7）您承诺不会在网络上以及在含有SAC俱乐部平台信息的网页上（包括但不限于论坛、BBS、评论等） 发布如下信息：</p> \n            <p></p> \n            <p>①&nbsp;反对宪法所确定的基本原则的；</p> \n            <p></p> \n            <p>②&nbsp;危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p> \n            <p></p> \n            <p>③&nbsp;损害国家荣誉和利益的；</p> \n            <p></p> \n            <p>④&nbsp;煽动民族仇恨、民族歧视，破坏民族团结的；</p> \n            <p></p> \n            <p>⑤&nbsp;破坏国家宗教政策，宣扬邪教和封建迷信的；</p> \n            <p></p> \n            <p>⑥&nbsp;散布谣言，扰乱社会秩序，破坏社会稳定的；</p> \n            <p></p> \n            <p>⑦&nbsp;散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p> \n            <p></p> \n            <p>⑧&nbsp;侮辱或者诽谤他人，侵害他人合法权益的；</p> \n            <p></p> \n            <p>⑨&nbsp;造谣诬陷损害SAC俱乐部平台名誉的；</p> \n            <p></p> \n            <p>⑩&nbsp;以及其他法律、行政法规禁止的其他内容的。</p> \n            <p></p> \n            <p>8）未经SAC俱乐部同意不得擅自复制、篡改、编制SAC俱乐部平台信息或平台自身宣传资料（包括但不限于声音、文字、图片、视频），更不得发布此类信息。</p> \n            <p></p> \n            <p>2、由于互联网世界的高速发展，本协议暂不能罗列且覆盖所有您与SAC俱乐部的权利与义务，也不能保证能适应将来的发展，因此，SAC俱乐部在平台上公示的与本协议相关的规则、声明、政策、解读、实施细则、公告和协议等均为本协议的补充协议，为本协议不可分割的一部分且具有同等法律效力。如在该类补充协议公示后，您继续使用SAC俱乐部的推广账户，即视为您同意前述补充协议并受其约束。</p> \n            <p></p> \n            <p>3、如您在开展推广过程中受到人身损害或财产损失的，由您自行负责，SAC俱乐部和商户对此不承担任何责任。</p> \n            <p></p> \n            <p>4、您与SAC俱乐部之间不存在劳动关系、劳务派遣关系或类似关系，SAC俱乐部不对您进行劳动者性质的管理，不对您承担劳动关系上的义务，您与SAC俱乐部之间不适用《劳动法》、《劳动合同法》等劳动相关的法律、法规、规范性文件。如因临时需要您临时佩戴SAC俱乐部标志、获取员工卡或办理与SAC俱乐部员工类似的手续，亦不代表您与SAC俱乐部之间建立劳动关系。</p> \n            <p></p> \n            <p>五、争议解决</p> \n            <p></p> \n            <p>本协议在订立、履行过程中发生的争议，由SAC俱乐部与您协商解决。协商不成时，任何一方均可向SAC俱乐部平台经营者所在地人民法院提起诉讼。</p> \n            <p></p> \n            <p></p> \n            <p>本协议著作权由SAC俱乐部所有，SAC俱乐部依法保留解释权利。</p> \n        </blockquote>\n        ';

const router: Router = useRouter();
const show: Ref<boolean> = ref(false);
const checked: Ref<boolean> = ref(false)
const phone: Ref<string> = ref('')
const code: Ref<string> = ref('')
/** 获取验证码 */
const codeMsg: Ref<string> = ref('获取验证码')
async function codeEvt() {
  if (!(/^1[3-9]{1}[0-9]{9}$/.test(phone.value))) {
     showToast('请输入正确的手机号');
     return
  }
  if (codeMsg.value !== '获取验证码') return
  let res = await userCodeApi(phone.value)
  if (res.code === 200) {
    codeMsg.value = '重新获取(60s)'
    showToast('验证码：' + res.data)
    localStorage.setItem('code', res.data)
    loopTimer(Date.now())
  } else {
    codeMsg.value = '获取验证码'
    showToast('获取验证码失败 请重试')
  }
}

/** 验证码倒计时 */
function loopTimer(st: number) {
  let timer = 60 - Math.ceil((Date.now() - st) / 1000)
  if (timer > 0) {
    codeMsg.value = `重新获取(${timer}s)`
    setTimeout(function () {
      loopTimer(st)
    }, 100)
  } else {
    codeMsg.value = '获取验证码'
  }
}

/** 登录方法 */
const store = useCommonStore()
async function loginEvt() {
  if (phone.value === '') {
    showToast('请输入手机号')
    return
  } else if (!(/^1[3-9]{1}[0-9]{9}$/.test(phone.value))) {
    showToast('请输入正确的手机号')
    return
  } else if (code.value === '') {
    showToast('请输入验证码')
    return
  }
  /** 请求接口 判断是否登录成功 */
  let res = await userLoginApi(phone.value + '', code.value)
  if (res.code !== 200) {
    if (localStorage.getItem('code') != code.value) {
      showToast('验证码错误')
      return
    } else {
      showToast(res.data)
      return
    }
  }
  console.log(res);
  
  /** 存储用户信息 */
  store.token = res.data.id
  store.userInfo = res.data
  console.log(store)
   /** 是否免登陆 */
    if (checked.value) {
        localStorage.setItem(AUTO_CACHE_KEY, encodeApi(res.data.token))
    } else {
        localStorage.removeItem(AUTO_CACHE_KEY)
    }

  showToast('登录成功')
  router.push('/home')
}

</script>

<style scoped lang="less">
@import "../../style/common.less";

.login-box {
  display: block;
  position: relative;
  height: 800px;
  width: 100vw;
  background: url("../../images/bj.png") no-repeat center center / 120% 100%;

  .back {
    width: 50px;
    height: 50px;
    text-align: center;
    padding-top: 10px;

    .van-icon {
      font-size: 30px;
    }
  }

  .bg-img {
    display: block;
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(to bottom, @r1, #fff);
  }

  .form {
    display: block;
    position: absolute;
    margin-top: 40px;
    width: 100vw;
    text-align: center;

    .line {
      text-align: center;
      position: relative;
      margin-bottom: 30px;

      span {
        font-size: 30px;
        position: absolute;
      }

      button {
        position: absolute;
        right: 34px;
        width: 100px;
        height: 36px;
        background-color: #eeeeee;
        border: 1px solid @c3;
        border-radius: 6px;
        font-size: 14px;
        color: @c1;
        font-weight: bolder;
      }

      input {
        width: calc(100% - 70px);
        border: none;
        outline: none;
        font-size: 1rem;
        color: @c1;
        background: transparent;
        text-indent: 16px;
        line-height: 40px;
        border-bottom: 1px solid @c3;
        text-indent: 60px;
        font-size: 20px;
      }
    }

    .van-button {
      width: calc(100% - 70px);
      height: 46px;
      border-radius: 30px;
      background-color: #eeeeee;
      border: none;
      color: @c3;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 0.5rem;
    }

    p {
      display: inline-block;
      margin-top: 17px;
      color: @b1;
      padding-right: 40px;
      font-size: 16px;
      float: right;
    }

    .van-checkbox {
      position: fixed;
      left: 40px;
      top: 472px;
      --van-checkbox-border-color:black;
    }
  }

  .agreement {
    position: absolute;
    bottom: 60px;
    font-size: 16px;
    text-align: center;
    padding-right: 30px;
    padding-left: 30px;
    color: @c2;

    .van-icon {
      padding-right: 8px;
      color: @b1;
      font-size: 20px;
    }

    span {
      color: @b1;
    }
  }

  .copy {
    width: 100vw;
    font-size: 16px;
    position: absolute;
    bottom: 30px;
    text-align: center;
    color: @c3;
  }

  .arrcod {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;

    .bj {
      width: 100vw;
      height: 100vh;
      background-color: @c2;
      opacity: 0.7;
    }

    // opacity: .6;
    .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 360px;
      height: 600px;
      background-color: #fff;
      border-radius: 10px;
      overflow-x: hidden;
      text-align: center;
      padding-top: 30px;

      .van-icon {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 30px;
      }

      p {
        font-size: 24px;
        letter-spacing: 1px;
        font-weight: 700;
      }

      .content-l {
        height: 440px;
        margin-top: 20px;
        overflow-x: hidden;
        padding: 0 20px;
        text-align: left;
      }

      .van-button {
        margin-top: 20px;
        width: calc(100% - 70px);
        height: 46px;
        border-radius: 30px;
        background-color: @b2;
        border: none;
        color: @g1;
        font-size: 20px;
        letter-spacing: 0.5rem;
      }
    }
  }
}</style>
